<!DOCTYPE html>
<html lang="en" xmlns:https="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{margin-top: 0px;margin-left: 0px}
    input::-webkit-input-placeholder {
         color: #aab2bd;
                        font-size: 12px;
                        text-align: left;
           }
    input{
        outline-style: none ;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 0px 14px;
        font-size: 16px;
        font-weight: lighter;
        font-family:sans-serif;
    }
    input:focus{
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    }
    .imgo1{width: 480px;height:624px;float: left;border: none;
        background-image: url("https://cdn-go.cn/qq-web/zc.qq.com/latest/v3/img/01-3.jpg");
            margin-left: 0px;margin-top: 0px;
    }
    .o1{width: 840px;height:524px;float: left}
    .o2{width: 840px;height:80px; }
    .o3{width:840px;height: 80px; }
    .o4{width: 77px;height: 77px;border-radius: 77px;background-color:#ccc;margin:auto;border: none;}
    .o5{width: 488px;height: 52px;margin:20px 170px;}
    .p1{font-size: 37px;margin:20px 345px;}
    .p3{font-size: 21px;color: white}
    .p4{font-size: 14px;}
    .o4 img{width: 77px;height: 77px;border-radius: 75px;background-color:#ccc;margin: 15px 390px;border: none;
        position: absolute;margin-left: 0px;margin-top: 0px}
    .pto1{width: 448px;height: 52px;border: #cccccc 2px solid;margin:20px 174px; font-size: 20px;border-radius: 5px}
    .o5{width: 480px;height: 56px;margin:20px 174px;}
    .pto2{width: 448px;height: 52px;border: #cccccc 2px solid;margin:20px 174px; font-size: 20px;border-radius: 5px}
    .pto3{width: 122px;height: 50px;border: #cccccc 2px solid;float: left;font-size: 19px; border-radius: 5px}
    .pto4{width: 256px;height: 50px;border: #cccccc 2px solid;float: right;border-radius:5px;font-size: 18px;}
    .pto6{width: 478px;height: 68px;
        background-color: blue;border: none;margin:20px 174px; }
</style>
<body>
<div class="imgo1"></div>
<div class="o1">
    <div class="o2">
        <header class="p1">欢迎注册</header>
    </div>
    <div class="o3">
       <div class="o4">
           <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F15%2F20150415H3038_SHXKW.jpeg&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639818129&t=09b49fee69e3ab5cd0acf332bdf88aec" >
       </div>
    </div>
    <input class="pto1" placeholder="昵称">
    <input class="pto2" placeholder="密码">
    <div class="o5">
        <input class="pto3" placeholder="+86">
        <input class="pto4" placeholder="手机号码">
    </div>
<!--    <div class="o6">-->
<!--        <input class="pto3" placeholder="短信验证码">-->
<!--        <button class="pto5"><p class="p2">发送短信验证码</p></button>-->
<!--    </div>-->
    <button class="pto6" ><a class="p3">立即注册</a></button>
</div>

</body>
</html>
<script>

</script>